import React from 'react'
import {Outlet,NavLink} from "react-router-dom"
import {mainRouter} from "../router/routerConfig"
import { Tabbar } from 'react-vant';
import { WapHomeO, DiamondO, OrdersO, VipCardO,UserO } from '@react-vant/icons';

const iconRender = (Str) =>{
    switch (Str) {
        case "WapHomeO":
            return <WapHomeO/>
        case "DiamondO":
            return <DiamondO/>
        case "OrdersO":
            return <OrdersO/>
        case "VipCardO":
            return <VipCardO/>
        case "VipCardO":
            return <VipCardO/>
        case "UserO":
            return <UserO/>
    }
}

// "WapHomeO" <WapHomeO/>
function Index() {
    
    return (
        <div className="index">
            <header>头部</header>
            <main>
                 <Outlet/>
            </main>
           <footer>
                <Tabbar>
                    {
                        mainRouter.map((item,index)=>{
                            return  <Tabbar.Item 
                                key={index} 
                                icon={iconRender(item.icon)}
                                >
                                    <NavLink to={item.path} >{item.title}</NavLink>
                            </Tabbar.Item>
                        })
                    }
                </Tabbar>
               
           </footer>
        </div>
    )
}

export default Index
